//基于node，支持node代码
const path=require('path')
//在内存中，根据指定的模板页面，生成一份内存中的首页，并自动把打包好的bundle注入到页面底部
//如果在配件插件，需要导出的对象中，挂载一个plugins节点
const htmlWebpackPlugin=require('html-webpack-plugin')
//启动热更新的第二步
const webpack=require('webpack')

const VueLoaderPlugin=require('vue-loader/lib/plugin')
// Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
// 所以我们要在这两个的基础上再去下载这个插件
// npm i vue-loader-plugin -S
// 然后在配置文件（webpack.config.js）那边要加上
// ---- webpack.config.js
// const VueLoaderPlugin = require('vue-loader/lib/plugin')

// module.exports = {
//   // ...
//   plugins: [
//     new VueLoaderPlugin()
//   ]
// }




//运行webpack或webpack-dev-server时，如果没有提供打包的入口文件和出口文件，会自动在根目录读取这个配置文件
module.exports={
    entry:path.join(__dirname,'./src/main.js'),//入口文件
    output:{
        path:path.join(__dirname,'./dist'),//输出路径
        filename:'bundle.js'                //指定输出文件的名称
    },
    // devServer:{
    //     open:true,              //自动打开浏览器
    //     port:3000,              //设置启动时运行的端口
    //     contentBase:'src',      //指定托管的根目录(虚拟生成文件--放在内存中)
    //     hot:true                //启动热更新的第一步(无需重新生成文件)
    // },
    plugins:[//所有weboack 插件的配置节点
        new webpack.HotModuleReplacementPlugin(),//new 一个热更新的模板对象，启动热更新的第三步
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),//指定模板路径
            filename:'index.html'                   //设置生成内存页面的名称
        }),
        new VueLoaderPlugin()
    ],
    module:{//配置所有的第三方loader模块       第一步装包，第二部写规则
        rules:[//第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//处理css文件的loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//处理less文件的loader
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//处理sass文件的loader
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=10000&name=[hash:8]-[name].[ext]'},//处理图片路径的loader(装载器)
            //loader可以传参数，规则和url传参一样，limit 单位是byte，比limit小的图片会被转为base64的字符串
            //name是图片名称 ，ext是后缀名
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//处理字体文件时，使用url-loader
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/ },//babel转化高级的ES语法
            {test:/\.vue$/,use:'vue-loader'},//处理 .vue的loader
        ]
    },
    resolve:{
        alias:{//设置 vue 被导入的时候的包的路径
            "vue$":"vue/dist/vue.js"
        }
    }
}